<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名聊天室</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="/Home/layui/css/layui.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="/Home/layui/layui.js"></script>
    <!-- 如果要开启雪花效果,请将这两行注释解开 -->
    <!--<script type="text/javascript" src="/Home/js/christmassnow.js"></script>-->
    <!--控制雪花大小-->
   <!-- <script src="/Home/js/controlSnow.js"></script>-->
    <script>
        
         let element;
         let layer;
         layui.use(["layer", "element"], function () {
             layer = layui.layer;
             element = layui.element;
         });

         function isWeixinCient(){   //判断是否是微信
             var ua = navigator.userAgent.toLowerCase();
             if(ua.match(/MicroMessenger/i)=="micromessenger") {
                 return true;
             } else {
                 return false;
             }
         }
    </script>

    <link rel="stylesheet" href="/Home/css/index.css">
    <style>
        .me-message .address{
            margin-top: 15px;
            margin-bottom: 5px;
           text-align: right;
        }
    </style>
</head>
<body>

<div class="banner">
    
    <!--  -->
    <audio id="bgm" src="/Home/music.mp3" autoplay loop="" style="display: none; width: 20px; height: 20px;"></audio>
    <div class="main-box">
        <div class="animate" hidden>
            <div class="say">
                <p class="" style="">嘿!陌生人,我很想对你说</p>
                <p>[那个夜晚很冷,谢谢你给了我一点温暖]</p>
            </div>
            <div class="sex">
                <div class="sex-box">
                    <div class="layui-inline">
                        <i class="layui-icon layui-icon-male" style="color: #1E9FFF;"></i>
                        <p>男生</p>
                    </div>
                    <div class="layui-inline">
                        <i class="layui-icon layui-icon-female" style="color:deeppink"></i>
                        <p>女生</p>
                    </div>
                </div>
            </div>
            <div class="username layui-input-block" hidden>
                <input type="text" name="title" required lay-verify="required" placeholder="给自己取一个昵称吧"
                       autocomplete="off" class="layui-input " style="">
            </div>
            <div class="intoChat">
                <button class="layui-btn layui-btn-primary layui-btn-lg">进入聊天</button>
                <div class="loding" hidden>
                    <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                    <p style="color: white">正在进行匹配~<span class="cut-num"></span></p>
                </div>

            </div>
            <div class="rotate-music">
                <img src="/Home/images/music.png" alt="">
            </div>
        </div>

    </div>

    <div class="animate" hidden>
        <div class="author">
            <p>2019.9.14 </p>
            <p><a href="https://xhyonline.com">关于作者<i class=" layui-icon  layui-icon-chat"></i></a></p>
        </div>
       <div class="">
           <div class="location">
               <p class="layui-inline" style="color: #FF5722;">
                   <img src="/Home/images/location.png" alt="">
               </p>
               <p class="layui-inline location-address" style="color: #FFFFFF"></p>
               <input type="hidden" class="city-district" value="">
               <input type="hidden" class="latitude" value="">
               <input type="hidden" class="longitude" value="">
           </div>
           <div class="people-num">
               <p class="layui-inline" style="color: #FF5722;">当前大厅人数:</p>
               <p class="layui-inline" style="color: #FFFFFF"><span class="num">1</span>人</p>
           </div>
       </div>
    </div>


    <div class="layui-progress " lay-filter="demo" lay-showPercent="true">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
</div>
<!--雪花掉落 drop-->
<div class="drop">

</div>

</body>
<!--微信js-sdk-->
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    let wxAddress=false;
    let iswx=isWeixinCient();

    if (iswx){

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "{$wxConfig['appId']}", // 必填，公众号的唯一标识
            timestamp: "{$wxConfig['timestamp']}", // 必填，生成签名的时间戳
            nonceStr: "{$wxConfig['nonceStr']}", // 必填，生成签名的随机串
            signature: "{$wxConfig['signature']}",// 必填，签名
            jsApiList: ['startRecord','stopRecord','playVoice','uploadVoice','downloadVoice','getLocation','hideAllNonBaseMenuItem','closeWindow'] // 必填，需要使用的JS接口列表
        });

        function getLocation(){     //获取定位
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    let speed = res.speed; // 速度，以米/每秒计
                    let accuracy = res.accuracy; // 位置精度
                    let api =`http://api.map.baidu.com/reverse_geocoding/v3/?ak=qifVtQaVOi5LgwTtgWGaeQRNgVyOsE81&output=json&coordtype=wgs84ll&location=${latitude},${longitude}`
                    $(".location .latitude").val(latitude);
                    $(".location .longitude").val(longitude);
                    $.ajax({
                        type:"get",
                        url:"/getLocation",
                        data:{api:api},
                        success:function (data) {
                            let jsonData=JSON.parse(data);
                            let chatAddress=jsonData.city+jsonData.district;//聊天使用的地址
                            $(".city-district").val(chatAddress);

                            $(".location-address").text(jsonData.formatted_address);
                            $(".location").show();
                            wxAddress=true;
                        },error:function (e) {

                        }
                    })
                },fail:function (e) {
                    layer.msg("我们建议您开启定位喔~这样能增加用户体验呢");
                },cancel:function (cancel) {
                    layer.msg("不要取消哦");
                    getLocation();
                }
            });
        }

        wx.ready(function(){

           getLocation();
        });
    }


</script>
<!--websocket 通信地址以及接收信息的逻辑均在此处修改-->
<script src="/Home/js/receiveMessage.js"></script>

<!--背景音乐播放及图片旋转在此处修改-->
<script src="/Home/js/music.js"></script>
<!--进入聊天室点击的逻辑代码与页面淡入,性别选择等逻辑-->
<script src="/Home/js/index.js"></script>


<script>

    $(function () {
      
        $("body").on("click",".audio-progress img",function(){
           
            let localId=$(this).attr("localId");
            wx.downloadVoice({
                serverId: localId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    let id = res.localId; // 返回音频的本地ID
                    layer.msg("正在播放");
                    wx.playVoice({
                        localId: id // 需要播放的音频的本地ID，由stopRecord接口获得
                    });
                }
            });
        });




    })


</script>


</html>
